<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>个人信息</span>
        
      </div>
    </template>
    <div id="per">
    <el-form :model="form" :rules="regRules" ref="myRegForm">
      <el-form-item  label="头像：" prop="imgPath" style="margin-top:0.1rem">
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8080/fileControl/upload"
          accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PBG, .GIF, .BMP"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          >
          <img   :src=baseurl+users.avatar class="avatar" />
          <!-- <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> -->
        </el-upload>
      </el-form-item>

      <el-form-item label="姓名：" prop="name">
        <el-input v-model="users.name" />
      </el-form-item>
      <el-form-item label="角色：" prop="role">
        <el-input v-model="users.role" />
      </el-form-item>
      <el-form-item label="学校：" prop="school">
        <el-input v-model="users.school" />
      </el-form-item>
      <el-form-item label="学号：" prop="number">
        <el-input v-model="users.number" />
      </el-form-item>
      <el-form-item label="手机：" prop="phone">
        <el-input v-model="users.phone" />
      </el-form-item>
      
      <el-form-item>
        <el-button @click="update(form)">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
  </el-card>
</template>



<script >
import { ElMessage } from 'element-plus'
import user from '../api/user'
import { mapState } from 'vuex';
// var token = localStorage.getItem('token')
  export default {
    data(){
        return{
          baseurl:this.$http.defaults.baseURL,
          form:{
            id:'',
            avatar:'',
            name:'',
            role:'',
            school:'',
            number:'',
            phone:'',
          },
          regRules: {
                // name: [
                //     { required: true, message: '请输入用户姓名', trigger: 'blur' },
                //     { min: 6, max: 10, message: '长度为6到10个字符', trigger: 'blur' },
                //     { pattern:/^[a-zA-Z0-9_]*$/, message:'由英文数字下滑线组成',trigger:'blur'}
                // ],
                
                name:[
                    { required: true, message: '请输入真实姓名', trigger: 'blur' },
                    // /[\u4E00-\u9FA5]/
                    { min: 2, max: 10, message: '长度为2到10个字符', trigger: 'blur' }
                ],
                school:[
                    { required: true, message: '请输入学校名称', trigger: 'blur' },
                    { min: 6, max:20, message: '长度为6到20个字符', trigger: 'blur' }
                ],
                role:[
                    {required:true,message:'请输入角色1为教师，0为学生',trigger:'blur'}
                ],
                number:[
                    { required: true, message: '请输入学号', trigger: 'blur' },
                    {pattern:/^[1-9]{4,12}\d*$/, message: '长度为4到12个正整数字', trigger: 'blur' },
                    // { pattern:/^[\w]+@[\w]+(\.[\w]+)+$/, message:'请输入合法邮箱地址',trigger:'blur'}
                ],
                phone:[
                    { required: true, message: '请输入电话号码', trigger: 'blur' },
                    { pattern:/^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\d{8}$/,
                     message:'请输入合法电话号码',trigger:'blur'}
                ],
                imgPath:[
                    { required: true, message: '请上传头像' },
                ],
            },
            
              
            

            
        }
    },
    mounted(){


      // var id = localStorage.getItem("token");

      // user.queryById(null).then((res)=>{
      //   if(res.code == 1){
      //     this.form = res.data;
      //   }
      // })
      this.form = this.users;

    },
    methods: {
      
      // 上传成功的回调
      handleAvatarSuccess( response,uploadFile){
        this.form.avatar = response.data.href;

      },

    //   beforeAvatarUpload(file){
    //       if (file.type !== '.png' || '.jpeg' || '.png') {
    //         ElMessage.error('照片格式不允许！！！')
    //         console.log(file.type)
    //         return false
    //       } else if (rawFile.size / 1024 / 1024 > 2) {
    //         ElMessage.error('照片尺寸超过2MB啦，请重新选择！')
    //         return false
    //       }
    //       return true
    // },

    update(form){

      //  var id = localStorage.getItem("token");

      //   this.form.id = id;
        user.updateUsers(form).then((res)=>{

          console.log(res.code)
          if(res.code==1){
            //success
            ElMessage.success('修改完成！')
          }else{
            ElMessage.error('修改失败！')
          }
        }).catch((res)=>{

        })

           } 
    },
    computed:{
        ...mapState(['users']),
    }
  }
</script>


<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.box-card {
  width: 80rem;
  margin:0.7rem auto;
  /* border: 1px solid red; */
  /* box-shadow: none; */
  background-image:  linear-gradient(to bottom right, var(--blueColor6) ,rgba(221, 245, 245, 0.032), rgba(217, 247, 247, 0.032));
}

#per{
  display:flex;
  /* flex-direction: column; */
  justify-content: center;
  align-items: center;
}
.el-form-item{
  width: 30rem;
  margin-top: 2.2rem;
}
.el-button{
  width: 13rem;
  height: 2.6rem;
  margin: 0 0 0 10rem;
  background-color: lightskyblue;
  border-radius: 5rem;
  font-size: 1.2rem;
  color: aliceblue;
}

.avatar-uploader .avatar {
  width: 3.5rem;
  height:3.5rem;
  margin-left: 1rem;
  /* border:1px dashed; */
  border-radius: 50%;
}
.avatar-uploader .el-upload {
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-warning);
}

/* .el-icon.avatar-uploader-icon {
  font-size: 1.8rem;
  color: #8c939d;
  width: 4rem;
  height: 1.8rem;
  text-align: center;

} */

</style>
  